<template>
  <div class="ctrlpanel-container">
    <h1>命令窗口</h1>
    <el-divider></el-divider>
    <span style="margin-bottom: 10px">设备ID: </span>
    <el-input type="textarea" autosize placeholder="请输入设备ID" v-model="textarea1"></el-input>
    <div style="margin: 20px 0;"></div>
    <span style="margin-bottom: 10px">命令消息: </span>
    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入消息" v-model="textarea2"></el-input>
    <div style="margin: 20px 0;"></div>
    <el-button type="primary" plain @click="send">发送</el-button>
    <el-divider></el-divider>
    <div style="height: 600px;">
      <el-scrollbar style="background-color: #2b2f3a; height: 100%" ref="scrollbar">
        <ol style="background-color: #2b2f3a; min-height: 47px">
          <li v-for="item in logCache" :key="item" style="list-style: none">
            <span style="color: green">{{item.data}}</span>
            <span style="color: red">{{item.level}}</span>
            <span style="color: darkgreen">{{item.tag}}</span>
            <span style="color: gray">{{item.tar}}</span>
            <span style="color: gray">{{item.cmd}}</span>
          </li>
        </ol>
      </el-scrollbar>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { send, updateLog } from '@/views/ctrlpanel/ctrlpanel'

export default {
  name: 'CtrlPanel',
  components: {},
  props: {},
  data() {
    return {
      // 输入框
      textarea1: '',
      textarea2: '',

      // 日志缓存
      logCache: []
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    // 发送
    send() {
      return new Promise((resolve, reject) => {
        console.log('进入发送函数')
        send({ deviceId: this.textarea1, cmd: this.textarea2 }).then(response => {
          const data = response
          console.log(data)
          this.logCache = updateLog(this.logCache, data)
          this.scrollbar_to_end()
          console.log(this.logCache)
          resolve()
        }).catch(error => {
          console.log('发送失败' + error)
          reject(error)
        })
      })
    },

    // 滚动条
    scrollbar_to_end() {
      const height = this.$refs.scrollbar.$refs.wrap.scrollHeight
      this.$refs.scrollbar.$refs.wrap.scrollTop = height
      console.log(this.$refs.scrollbar.$refs.wrap.scrollTop)
    }
  }
}
</script>

<style lang="scss" scoped>
.ctrlpanel {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.el-scrollbar__wrap{
  overflow-x: hidden;
}
</style>
